<template>
	<div class="node-wrap">
		<div class="node-wrap-box" @click="show">
			<div class="title" style="background: #35b881;">
				<el-icon class="icon"><el-icon-set-up /></el-icon>
				<span>{{ nodeConfig.nodeName }}</span>
				<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>
			</div>
			<div class="content">
				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
				<span v-else class="placeholder">执行延迟事件</span>
			</div>
		</div>
		<add-node v-model="nodeConfig.childNode" :parent-data="nodeConfig"></add-node>
		<el-drawer title="抄送人设置" v-model="drawer" destroy-on-close append-to-body :size="600">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
				</div>
			</template>
			<el-container>
				<el-main style="padding:0 20px 20px 20px">
					<el-form label-position="top">
						<el-form-item label="选择触发动作">
							<el-radio-group v-model="form.props.taskType" :validate-event="false">
								<el-radio v-for="item in items" :label="item.value" @change="changeType($event,item.label)"  :key="item.value">{{item.label}}</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="触发事件" v-if="form.props.taskType ==1">
							<el-select v-model="form.props.event" style="width: 200px" @change="getParams" placeholder="选择调用接口">
								<el-option
									v-for="item in options"
									:key="item.id"
									:label="item.remark"
									:value="item.id"
								/>
							</el-select>
						</el-form-item>
						<el-form-item label="短信模板" v-if="form.props.taskType ==2">
							<el-select v-model="form.props.event" style="width: 200px" @change="getMsgParams" placeholder="选择调用接口">
								<el-option
									v-for="item in messageList"
									:key="item.id"
									:label="item.templateName"
									:value="item.id"
								/>
							</el-select>
						</el-form-item>
						<el-form-item label="接收人" v-if="form.props.taskType ==2">
							<el-input style="width: 200px" v-model="form.props.phone"></el-input>
						</el-form-item>
						<el-form-item label="参数设置" v-if="form.props.event !=''">
							<jd-form-table v-model="form.successEventParam"  :addBtn="false" placeholder="暂无数据">
								<el-table-column prop="val" label="参数名">
									<template #default="scope">
										<el-input v-model="scope.row.field" placeholder="" readonly></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="open" label="表单字段" align="center">
									<template #default="scope">
										<el-select style="width: 200px" v-model="scope.row.defaultValue" placeholder="">
											<el-option
												v-for="item in tableParams"
												:key="item.value"
												:label="item.label"
												:value="item.value"
											/>
										</el-select>
									</template>
								</el-table-column>
							</jd-form-table>
						</el-form-item>
					</el-form>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer=false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
	import addNode from './addNode'

	export default {
		inject: ['select'],
		props: {
			modelValue: { type: Object, default: () => {} }
		},
		components: {
			addNode
		},
		data() {
			return {
				nodeConfig: {},
				drawer: false,
				isEditTitle: false,
				form: {

				},
				treeConfig: this.$store.state.workflow,
				appId:null,
				// 任务类型 1:调用接口 2:发送短信 3:发送邮件
				taskType:1,
				// 消息模板列表
				messageList:[],
				items:[
					{label:'调用接口',value:1},
					{label:'发送短信',value:2},
				],
				options : [],
				// 表单参数列表
				tableParams:[
					{label:"LaunchUserName(发起人姓名)",value:"LaunchUserName",type:"system"},
					{label:"LaunchUserId(发起人ID)",value:"LaunchUserId",type:"system"},
					{label:"OperatorUserName(当前操作用户名称)",value:"OperatorUserName",type:"system"},
					{label:"OperatorUserId(当前操作用户Id)",value:"OperatorUserId",type:"system"},
				],
			}
		},
		watch:{
			modelValue(){
				this.nodeConfig = this.modelValue
			}
		},
		mounted() {
			this.nodeConfig = this.modelValue
			this.appId = this.$route.query.appId;
			this.getInterFaceList();

		},
		methods: {
			// 显示
			show(){
				this.form = {}
				this.form = JSON.parse(JSON.stringify(this.nodeConfig))
				this.drawer = true
				this.addParam()
			},
			// 编辑标题
			editTitle(){
				this.isEditTitle = true
				this.$nextTick(()=>{
					this.$refs.nodeTitle.focus()
				})
			},
			// 获取参数
			async getParams(val) {
				let res = await this.$API.app.interface.getParams.get(val);
				if (res.code == 200) {
					res.data.map((item) => {
						item.defaultValue = null;
					})
					this.form.successEventParam = res.data;
				}
			},
			// 获取短信参数
			async getMsgParams(val) {
				let res = await this.$API.system.template.getTemplate.get(val);
				console.log(res)
				if (res.code == 200) {
					this.form.successEventParam =JSON.parse(res.data.parameter)
				}
			},
			// 标题保存
			saveTitle(){
				this.isEditTitle = false
			},
			// 保存
			save(){
				this.$emit("update:modelValue", this.form)
				this.drawer = false
			},
			// 删除节点
			delNode(){
				this.$emit("update:modelValue", this.nodeConfig.childNode)
			},
			// 触发事件改变
			changeEvent(env){
				this.$nextTick(() => {
					 this.nodeConfig.props.taskName =env.label;
					 this.toText(this.nodeConfig);
				})
			},
			toText(nodeConfig){
				if (typeof(nodeConfig.props) != "undefined")
				{
					return "触发事件 "+nodeConfig.props.taskName;
				}else {
					return "触发事件";
				}
			},
			// 获取消息模板
			async getMessageTemplateList() {
				let form = {}
				form.appId = this.appId;
				let res = await this.$API.system.template.getUserTemplate.get(form);
				if (res.code == 200){
					this.messageList = res.data;
				}
			},
			// 根据应用获取接口列表
			async getInterFaceList() {
				let res = await this.$API.app.interface.getDetailByAppId.get(this.appId);
				if (res.code == 200){
					console.log(res.data)
					this.options =res.data;
				}
			},
			async addParam() {
				let dataForm = null;
				let nodeForm = null;
				if (typeof (this.treeConfig.flowData.nodeConfig) != 'undefined') {
					dataForm = this.treeConfig.flowData.nodeConfig.dataForm;
				}
				if (typeof (this.treeConfig.flowData.nodeConfig) != 'undefined') {
					nodeForm = this.treeConfig.flowData.nodeConfig.nodeForm;
				}
				if (dataForm != null) {
					await this.pushMsgParam(dataForm)
				}
				if (nodeForm != null) {
					await this.pushMsgParam(nodeForm)
				}
			},
			// 添加表单参数字段
			async pushMsgParam(id) {
				let res = await this.$API.app.form.get.get(id);
				if (res.code == 200) {
					let temp = JSON.parse(res.data.formTemplate)
					for (let i = 0; i < temp.formFields.length; i++) {
						for (let j = 0; j < temp.formFields[i].fields.length; j++) {
							let field = temp.formFields[i].fields[j]
							this.tableParams.push({
								label: "(" + field.field + ")" + field.fieldName,
								value: field.field,
								type: "form"
							},)
						}
					}
				}
			},
			// 触发动作改变
			changeType(env,label){
				this.$nextTick(() => {
					this.form.props.taskName=label;
					this.nodeConfig.props.event =env;
					this.nodeConfig.props.taskName =label;
					this.toText(this.nodeConfig);
					this.form.props.event =''
					if (env == 2){
						this.getMessageTemplateList()
					}
				})
			}
		}
	}
</script>

<style>
</style>
